:root {
  --linear-ease: linear(
    0,
    0.068,
    0.19 2.7%,
    0.804 8.1%,
    1.037,
    1.199 13.2%,
    1.245,
    1.27 15.8%,
    1.274,
    1.272 17.4%,
    1.249 19.1%,
    0.996 28%,
    0.949,
    0.928 33.3%,
    0.926,
    0.933 36.8%,
    1.001 45.6%,
    1.013,
    1.019 50.8%,
    1.018 54.4%,
    1 63.1%,
    0.995 68%,
    1.001 85%,
    1
  );
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  outline: none;
  color: inherit;
}
#app {
  font-size: 20px;
  display: grid;
  place-items: center;
  grid-template-rows: 1fr 2fr 0.5fr;
  background-color: #212121;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  a {
    color: inherit;
    outline: none;
    text-decoration: none;
    &:hover,
    &:active,
    &:focus {
      color: inherit;
      outline: none;
      text-decoration: none;
    }
  }
  .nav {
    display: flex;
    position: relative;
    transform: translate3d(0, 0, 0.01px);
    opacity: 0.99;
    background-color: hsl(205deg 0% 0% / 0.1);
    backdrop-filter: blur(9px) brightness(1.1);
    border-radius: 100vw;
    padding: 0.4em;
    box-shadow: 0 4px 20px hsl(205deg 50% 30% / 0.15),
      0 4px 10px hsl(205deg 30% 10% / 0.075),
      inset 0 -4px 15px 6px hsl(205deg 70% 90% / 0.2),
      inset 0 -2px 5px hsl(205deg 70% 90% / 0.15),
      inset 0 -1px 1px hsl(205deg 70% 90% / 0.4),
      inset 0 10px 15px hsl(205deg 30% 10% / 0.2),
      inset 0 1px 2px hsl(205deg 70% 90% / 0.3);
    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 100vw;
    }
    &::before {
      mask-size: 55%;
      z-index: 1;
      backdrop-filter: blur(7px) brightness(1.05);
      background-color: hsl(205deg 0% 100% / 0.1);
    }
    &::after {
      mask-size: 50%;
      mask-repeat: repeat;
      mask-mode: luminance;
      z-index: 2;
      backdrop-filter: blur(5px) brightness(0.95);
      background-color: hsl(205deg 0% 20% / 0.05);
      box-shadow: inset 0 -4px 15px 5px hsl(205deg 70% 90% / 0.3),
        inset 0 -2px 5px hsl(205deg 70% 90% / 0.15),
        inset 0 -1px 1px hsl(205deg 70% 90% / 0.4),
        inset 0 1px 2px hsl(205deg 70% 90% / 0.3);
    }
    ul {
      display: flex;
      gap: 5em;
      list-style: none;
      padding: 0 1em;
      margin: 0;
      position: relative;
      z-index: 3;
      color: white;
      text-shadow: 0 1px 1px hsl(205deg 30% 10% / 0.2);
      li {
        padding: 0.6em 1em;
        border-radius: 100vw;
        position: relative;
        color: white;
        cursor: pointer;
        box-shadow: 0 0 5p 1.5px white;
        transition: all 1.8s var(--linear-ease) 0.2s, box-shadow 0.3s ease;
        &:focus-within {
          box-shadow: 0 0 5p 1.5px white;
        }
        &::after {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: 100vw;
          background-color: white;
          opacity: 0;
          scale: 0;
          transition: all 2s var(--linear-ease) 0.2s;
          z-index: -1;
        }
        &.active {
          color: black;
          text-shadow: none;
          &::after {
            opacity: 1;
            scale: 1;
          }
        }
      }
    }
  }
  .effect {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    opacity: 1;
    pointer-events: none;
    display: grid;
    place-items: center;
    z-index: 1;
    &.text {
      color: white;
      z-index: 1;
      transition: color 0s ease;
      &.active {
        color: black;
        transition: color 1.8s var(--linear-ease) 0.2s;
      }
    }
    &.filter {
      filter: blur(7px) contrast(20);
      mix-blend-mode: lighten;
      position: absolute;
      &::before,
      &::after {
        content: "";
        position: absolute;
      }
      &::before {
        inset: -75px;
        z-index: -2;
        background-color: black;
      }
      &::after {
        inset: 0;
        background-color: white;
        scale: 0;
        opacity: 0;
        z-index: -1;
        border-radius: 100vw;
      }
    }
    &.active::after {
      animation: pill 2s var(--linear-ease) 0.2s both;
    }
  }
  .particles {
    position: absolute;
    inset: 0;
    transform: translate3d(0, 0, 0px);
  }
  .particle,
  .point {
    display: block;
    opacity: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    transform-origin: center;
  }
  .particle {
    --time: 5s;
    opacity: 0;
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    animation: particle var(--time) ease -350ms;
  }
  .point {
    background: var(--color);
    opacity: 1;
    animation: point var(--time) ease -350ms;
  }
}

@keyframes pill {
  to {
    scale: 1;
    opacity: 1;
  }
}
@keyframes particle {
  0% {
    transform: rotate(0deg)
      translate(calc(var(--start-x) * 1), calc(var(--start-y) * 1));
    opacity: 1;
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }

  70% {
    transform: rotate(calc(var(--rotate) * 0.5))
      translate(calc(var(--end-x) * 1.2), calc(var(--end-y) * 1.2));
    opacity: 1;
    animation-timing-function: ease;
  }

  85% {
    transform: rotate(calc(var(--rotate) * 0.66))
      translate(calc(var(--end-x) * 1), calc(var(--end-y) * 1));
    opacity: 1;
  }

  100% {
    transform: rotate(calc(var(--rotate) * 1.2))
      translate(calc(var(--end-x) * 0.5), calc(var(--end-y) * 0.5));
    opacity: 1;
  }
}

@keyframes point {
  0% {
    scale: 0;
    opacity: 0;
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  25% {
    scale: calc(var(--scale) * 0.25);
  }
  38% {
    opacity: 1;
  }
  65% {
    scale: var(--scale);
    opacity: 1;
    animation-timing-function: ease;
  }
  85% {
    opacity: 1;
    scale: var(--scale);
  }
  100% {
    scale: 0;
    opacity: 0;
  }
}
